<template>
    <div class="hospital">
        <!-- 左侧导航区域 -->
        <div class="menu">
            <div class="top">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">
                        <el-icon>
                            <home-filled />
                        </el-icon>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>医院二级页面</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router>
                <el-menu-item index="/hospital/register">
                    <template #title>
                        <el-icon>
                            <alarm-clock />
                        </el-icon>
                        <span>预约挂号</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="/hospital/detail">
                    <el-icon>
                        <document />
                    </el-icon>
                    <template #title>医院详情</template>
                </el-menu-item>
                <el-menu-item index="/hospital/notice">
                    <el-icon>
                        <chat-line-square />
                    </el-icon>
                    <template #title>预约通知</template>
                </el-menu-item>
                <el-menu-item index="/hospital/close">
                    <el-icon>
                        <warning />
                    </el-icon>
                    <template #title>停诊信息</template>
                </el-menu-item>
                <el-menu-item index="/hospital/search">
                    <el-icon>
                        <search />
                    </el-icon>
                    <template #title>查询/取消</template>
                </el-menu-item>
            </el-menu>
        </div>
        <!-- 内容展示区域(路由组件展示位置) -->
        <class class="content">
            <router-view></router-view>
        </class>
    </div>
</template>

<script setup lang="ts">
import { AlarmClock, Document, ChatLineSquare, Warning, Search, HomeFilled } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router';

//获取当前路由信息
let $route =useRoute()

</script>

<style scoped lang="scss">
.hospital {
    display: flex;

    .menu {
        flex: 2;
        display: flex;
        flex-direction: column;
        align-items: center;

        .top {
            color: #7f7f7f;
            margin-bottom: 10px;
        }
    }

    .content {
        flex: 8;
    }
}
</style>